<template>
  <view class = "content">
    <!--  顶部标题栏  -->
    <!--    <view class = "Tab">
          <view class = "Tab_left">
            <image :src = "`${BASE_URL}/mine/back.png`" class = "back_icon" @click = "back"></image>
          </view>
          <view class = "Tab_center">
            <view class = "Tab_text">积分中心</view>
          </view>
        </view>-->
    <view class = "top">
      <view class = "top_left">
        <view class = "integral_detail" @click = "navigateToDetail">
          积分明细
        </view>
      </view>
      <view class = "top_center">
        <view style = "display: flex;flex-direction: column;">
          <view style = "font-size: 50px;color: white;text-align: center;">120</view>
          <view style = "font-size: 15px;color: white;text-align: center;">我的积分</view>
        </view>
      </view>
    </view>
    <view class = "center">
      <view class = "center_top">游戏关卡解锁任务</view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">体验任意游戏一次</view>
          <view style = "font-size: 12px;">20积分</view>
        </view>
        <view class = "flex_right_unfinish">去完成</view>
      </view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">通关“龙川博物馆”关卡</view>
          <view style = "font-size: 12px;">20积分</view>
        </view>
        <view class = "flex_right_unfinish">去完成</view>
      </view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">通关“霍山”关卡</view>
          <view style = "font-size: 12px;">20积分</view>
        </view>
        <view class = "flex_right_unfinish">去完成</view>
      </view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">通关“黄居仁故居”关卡</view>
          <view style = "font-size: 12px;">20积分</view>
        </view>
        <view class = "flex_right_unfinish">去完成</view>
      </view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">通关“苏维埃政府”关卡</view>
          <view style = "font-size: 12px;">20积分</view>
        </view>
        <view class = "flex_right_finish">已完成</view>
      </view>

    </view>
    <view class = "bottom">
      <view class = "center_top">非遗文化解锁任务</view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">体验任意非遗文化一次</view>
          <view style = "font-size: 12px;">20积分</view>
        </view>
        <view class = "flex_right_unfinish">去完成</view>
      </view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">阅览“龙川杂技”非遗文化</view>
          <view style = "font-size: 12px;">20积分</view>
        </view>
        <view class = "flex_right_finish">已完成</view>
      </view>

    </view>
  </view>
</template>
<script setup>
import {
  ref
} from 'vue';
import {BASE_URL} from "../../../utils/api";

function navigateToDetail() {
  uni.navigateTo({
    //放置跳转页面
    url: '/pages/mine/integral/integral_detail'
  });
}

function back() {
  uni.switchTab({
    //放置跳转页面
    url: '/pages/mine/mine'
  });
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(#a7e7a7, #f3f3f3);
}

.Tab {
  width: 100%;
  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Tab_left {
  display: flex;
  /* border: 3px red solid; */
  flex: 0.3;
}

.Tab_center {
  display: flex;
  flex: 1;
  justify-content: center;
  /* border: 3px red solid; */
  padding-right: 80px;
}

.back_icon {
  width: 30px;
  height: 30px;
}

.Tab_text {
  font-size: 18px;
  font-weight: 800;
}

.top {
  margin-top: 35px;
  width: 100%;
  flex: 0.4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top_left {
  flex: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.integral_detail {
  text-align: center;
  font-size: 12px;
  color: white;
  padding: 5px 10px;
  background-color: gray;
  border-radius: 20px;
}

.top_center {
  flex: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 80px;
}

.center {
  margin-top: 35px;
  flex: 1;
  width: 80%;
  display: flex;
  flex-direction: column;
  border-radius: 30;
  gap: 50rpx;
  background-color: white;
  justify-content: flex-start;
  padding: 20px;
  border-radius: 30px;
}

.center_top {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}

.flex {
  display: flex;
  justify-content: flex-end;
  gap: 50px;
  width: 90%;
  align-items: center;
}

.flex_left {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
}

.flex_right_unfinish {
  color: white;
  border-radius: 20px;
  padding: 5px;
  font-size: 12px;
  background-color: #ff8d1a;
  text-align: center;
  flex: 0.3
}

.flex_right_finish {
  color: white;
  border-radius: 20px;
  font-size: 12px;
  padding: 5px;
  background-color: gray;
  text-align: center;
  flex: 0.3
}

.bottom {
  margin-top: 35px;
  margin-bottom: 50px;
  flex: 0.6;
  width: 80%;
  display: flex;
  flex-direction: column;
  border-radius: 30;
  gap: 50rpx;
  background-color: white;
  padding: 20px;
  border-radius: 30px;
  justify-content: flex-start;
  align-items: center;
}
</style>